<template>
  <div
    ref="containerRef"
    class="guide_search group relative p-0.5 rounded-xl border-white duration-500 hover:bg-red-100/40"
  >
    <div>
      <!-- 搜索图标 -->
      <m-svg-icon
        class="w-1.5 h-1.5 absolute translate-y-[-50%] top-[50%] left-2"
        name="search"
        color="#707070"
      />
      <!-- 输入框 -->
      <input
        type="text"
        class="block w-full h-[44px] pl-4 text-sm outline-0 bg-zinc-100 dark:bg-zinc-800 caret-zinc-400 rounded-xl text-zinc-900 dark:text-zinc-200 tracking-wide font-semibold border border-zinc-100 dark:border-zinc-700 duration-500 group-hover:bg-white dark:group-hover:bg-zinc-900 group-hover:border-zinc-200 dark:group-hover:border-zinc-700 focus:border-red-300"
        placeholder="搜索"
        v-model="inputValue"
        @keyup.enter="onHandleSearch"
        @focus="handlerFocus"
        @blur="handleBlur"
      />
      <!-- 删除按钮 -->
      <m-svg-icon
        v-show="inputValue"
        class="h-1.5 w-1.5 absolute translate-y-[-50%] top-[50%] right-9 duration-500 cursor-pointer"
        name="input-delete"
        color="#707070"
        @click="onClearInputValue"
      />
      <!-- 分割线 -->
      <div
        class="opacity-0 h-1.5 w-[1px] absolute translate-y-[-50%] top-[50%] right-[62px] duration-500 bg-zinc-200 group-hover:opacity-100"
      />
      <!-- 搜索按钮 -->
      <m-button
        class="absolute translate-y-[-50%] dark:hover:bg-zinc-600 dark:group-hover:bg-zinc-600 top-[50%] right-1 rounded-xl duration-500 opacity-0 group-hover:opacity-100"
        icon="search"
        iconColor="#ffffff"
        @click="onHandleSearch"
      />
    </div>
    <!-- 下拉区 -->
    <transition name="slide" v-show="props.isFocus">
      <div
        v-if="$slots.dropdown"
        v-show="isFocus"
        class="max-h-[368px] w-full text-base overflow-auto dark:text-zinc-300 bg-white dark:bg-zinc-800 absolute z-20 left-0 top-[56px] p-2 rounded border border-zinc-200 dark:border-zinc-600 duration-200 hover:shadow-3xl scrollbar-thin scrollbar-thumb-zinc-200 dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900"
      >
        <slot name="dropdown" />
      </div>
    </transition>
  </div>
</template>
<script>
// 数据双向绑定
const EMITS_UPDATE_MODELVALUE = 'update:modelValue'

// 搜索事件
const EMITS_SEARCH = 'search'

// 删除文本
const EMITS_CLEAR = 'clear'

// 输入事件
const EMITS_INPUT = 'input'

// 获取焦点事件
const EMITS_FOCUS = 'focus'

// 失焦事件
const EMITS_BLUR = 'blur'
</script>
<script setup>
import { ref, reactive, toRefs, onMounted, watch, nextTick } from 'vue'
import { useVModel, onClickOutside, useDebounceFn } from '@vueuse/core'
const emits = defineEmits([
  EMITS_UPDATE_MODELVALUE,
  EMITS_SEARCH,
  EMITS_CLEAR,
  EMITS_INPUT,
  EMITS_FOCUS,
  EMITS_BLUR
])

// 1.实现数据的双向绑定
const props = defineProps({
  modelValue: {
    type: String,
    required: true
  },
  isFocus: {
    type: Boolean,
    default: false
  }
})

const inputValue = useVModel(props)
watch(
  () => inputValue.value,
  useDebounceFn((val) => {
    emits(EMITS_INPUT, inputValue.value)
  }, 500)
)

const onClearInputValue = () => {
  inputValue.value = ''
  emits(EMITS_CLEAR, '')
}

// 触发搜索事件
const onHandleSearch = () => {
  emits(EMITS_SEARCH, inputValue.value)
  // console.log('搜索', inputValue.value)
}

// 输入框是否获取焦点
const isFocus = ref(false)
// 获取焦点
const handlerFocus = () => {
  isFocus.value = true
  emits(EMITS_FOCUS)
}
// 失去焦点
const handleBlur = () => {
  // isFocus.value = false
  emits(EMITS_BLUR)
}

const containerRef = ref(null)
// 获取指定元素,当点击事件点击指定元素区域外所触发的事件
onClickOutside(containerRef, (value) => {
  if (value) {
    isFocus.value = false
  }
})
</script>
<style scoped lang="scss">
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s;
}
.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateY(40px);
}
</style>
